<template>
    <div class="index-container">
        <el-row type="flex" class="index-box">
            <el-col :span="1">
                <div class="menu-list flex flex-direction-column">
                    <div class="menu-item" @click="handleRedirectChat">
                        <el-badge :value="count" :max="9" :hidden="count<=0">
                            <el-icon size="22" color="#fff">
                                <ChatLineRound/>
                            </el-icon>
                        </el-badge>
                    </div>
                    <div class="menu-item" @click="handleRedirectUser">
                        <el-icon size="22" color="#fff">
                            <User/>
                        </el-icon>
                    </div>
                    <div class="menu-item flex flex-direction-column justify-content-end flex-grow-1">
                        <router-link to="/index/site">
                            <el-icon size="22" color="#fff">
                                <Setting/>
                            </el-icon>
                        </router-link>
                    </div>
                </div>
            </el-col>
            <el-col :span="23" class="height-100-percent">
                <router-view></router-view>
            </el-col>
        </el-row>
        <audio class="audio" :src="audioMp3" ref="newMessage"></audio>
    </div>
</template>

<script setup>
    import {ChatLineRound, Setting, User} from '@element-plus/icons-vue';
    import audioMp3 from '@/assets/18.mp3';
    import {getCurrentInstance, onMounted, onBeforeUnmount, computed, ref} from 'vue';
    import {useStore} from 'vuex';
    import {useRouter} from 'vue-router';

    const {proxy} = getCurrentInstance();
    const store = useStore();
    const router = useRouter();
    const count = computed(() => store.getters.getNewMessageCount);
    const chatId = computed(() => store.getters.getCurrentChatId);
    const userId = computed(() => store.getters.getCurrentUserId);
    const newMessage = ref();//消息音
    //定义监听事件
    const sockets = {
        async newMessageCount(data) {
            await store.dispatch('handleChangeNewMessageCount', data);
        },
        async chatList(data) {
            await store.dispatch('handleChangeChatList', data);
        },
        async logout() {
            await store.dispatch('handleChangeLogin', false);
            await store.dispatch('handleChangeIsAddRouter', false);
            await router.push('/login');
        },
        async newMessageSound() {
            if (newMessage.value.paused || newMessage.value.ended) {
                newMessage.value.play();
            }
        }
    };
    onMounted(() => {
        proxy.$addSockets(sockets, proxy);
        proxy.$socket.io.open();
        proxy.$socket.io.emit('login', store.getters.getUserInfo);
        proxy.$socket.io.emit('getNewMessageCount');
        proxy.$socket.io.emit('getChatList');
    });

    onBeforeUnmount(() => {
        proxy.$removeSockets(sockets, proxy);
        proxy.$socket.io.close();
    });
    //跳转聊天列表
    const handleRedirectChat = async () => {
        if (chatId.value) {
            await router.push(`/index/user-chat-detail/${chatId.value}`);
        } else {
            await router.push(`/index`);
        }
    };
    //跳转用户列表
    const handleRedirectUser = async () => {
        if (userId.value) {
            await router.push(`/index/user/detail/${userId.value}`);
        } else {
            await router.push(`/index/user`);
        }
    };
</script>

<style lang="less" scoped>
    .index-container {
        height: 100%;

        .audio {
            display: none;
        }

        .index-box {
            height: 100%;

            .menu-list {
                background: #4387f6;
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 15px 0;

                .menu-item {
                    margin: 8px 0;
                    cursor: pointer;

                    &:last-child {
                        margin-bottom: 30px;
                    }
                }
            }
        }
    }
</style>